<div class="modal-header">
    <h4 class="modal-title" style="line-height: 30px;">{{ 'public_share' | translate}} <i ng-click="ok()" class="fa fa-times pull-right cbutton adjust-btn" click-effect></i></h4>
</div>
<style>
    #share-content .app-icon .fa{
        font-size:30px;

    }
    #share-content .share-to-txt{
        font-size: 20px;
    }
    #share-content .hr{
        margin: 0px 0 5px 0;
    }
    #share-content .close-share{
        font-size: 20px;
        margin-top: 15px;
    }
    /*#share-content .app-icon .fa{*/
        /*padding:0 5px;*/
    /*}*/
    .btn-ghost{
        background: transparent;
        border: 1px solid #797979;
        color: #797979;
    }
    .btn-ghost:hover{
        background: transparent;
        border: 1px solid black;
        color: black;
    }
    input:focus{
        /*outline: none;*/
    }
    .webchat-share-info{
        position: absolute;
        background: #fff;
        padding: 20px;
        border: 6px solid rgb(234, 234, 234);
        height: 128px;
        /*right: 0;*/
        /*top: -150px;*/
        right: -30px;
        top: -140px;
        width:128px;
    }
    .qr-use-info{
        padding:0 20px;
    }
    .tri-angle-pointer{
        position: absolute;
        /* bottom: 0; */
        top: -28px;
        width: 20px;
        height: 20px;
        transform: rotate(45deg);
        background: #fff;
    }
    .qr-use-info p{

    }
    .btn-clipboard{
        line-height: 14px;
    }
    #shared-link{
        /*width: 170px;*/
        /*height: 18px;*/
        margin-left: 10px;
        /*border: 1px solid rgb(222, 222, 222);*/
        /*border-radius: 4px;*/
        /*padding: 0 12px;*/
    }
    .the-shared-link{
        line-height: 40px;
        height:60px;
        color:#858585;
        font-size: 12px;
    }
    .text-info{
        height: 40px;
        color:#858585;
        font-size: 12px;
        /*position: relative;*/
        /*line-height: 50px;*/
    }
    .icon-info{
        height:80px;
        padding-left: 34px;
    }
    .close-share-and-set{
        height:50px;
        line-height:50px;
    }
    .badge-adjust{
        /*position: absolute;*/
        font-size: 14px;
        /*background: rgba(0, 168, 179,0.7);*/
    }
    .btn-padding{
        padding: 5px 40px;
    }
    .loading-for-link{
        min-height: 200px;
        line-height: 200px;
        text-align: center;
    }
    a.mail-to:hover,a.mail-to:visited,a.mail-to:focus{
        text-decoration: none;
    }
    .icon-container{
        display: inline-block;
        width: 40px;
        float:left;
    }
</style>
<div class="modal-body" id="share-content">

    <div class="loading-for-link text-center" ng-if="waitingForLink">
        <i class="fa fa-spinner fa-pulse"></i>
    </div>

    <!-- show  file do not have link -->
    <div ng-if="!hasSharedLink && !waitingForLink" class="text-center" style="padding: 50px 0;">
        <p>{{ 'share_to_anyone' | translate }}</p>
        <button class="btn btn-custom-primary btn-padding" ng-click="getSharedFileLink(file)">{{ 'start_share' | translate }} <i ng-show="loading" class="fa fa-spinner fa-pulse"></i></button>
    </div>

    <!-- show only file has share link -->
    <div ng-if="hasSharedLink && !waitingForLink">
        <div class="the-shared-link text-center">
            <span>{{ 'file_link' | translate }}</span>
            <span id="shared-link">{{ sharedLink }}</span>
            <!--<input type="text" auto-select-all id="shared-link" readonly="readonly" value="{{ sharedLink }}">-->
            <!--<span>{{ sharedLink }}</span>-->
        </div>
        <div class="share-part row text-center" style="height: 140px;">
            <div class="col-xs-4">
                <div class="text-info">
                    <span class="badge badge-adjust sub-bg-color">1</span> {{ 'share_to_social' | translate }}
                </div>
                <div class="icon-info" style="line-height: 0;">
                    <span class="app-icon">
                        <div>
                            <span class="icon-container">
                                <a class="mail-to" href="mailto:?body={{sharedLink}}">
                                    <i class="fa fa-envelope-square" style="color:#0091de"></i>
                                </a>
                            </span>
                            <span class="icon-container">
                                <i ng-click="shareTo('google')" class="fa fa-google-plus-square" style="color:#DF574C;"></i>
                            </span>
                            <!--<i ng-click="emailTo(sharedLink)" class="fa fa-envelope-square" style="color:#0091de"></i>-->

                            <span class="icon-container">
                                <i ng-click="shareTo('facebook')" class="fa fa-facebook-square" style="color:#44619D;"></i>
                            </span>

                        </div>
                        <div>
                            <span class="icon-container">
                                <i ng-click="shareTo('twitter')" class="fa fa-twitter-square" style="color:#55ACEE;"></i>
                            </span>
                            <span class="icon-container">
                                <i ng-click="shareTo('linkedin')" class="fa fa-linkedin-square" style="color:#0077B5;"></i>
                            </span>
                            <span class="icon-container fa-stack fa-lg" style="height: 45px;cursor:pointer;line-height: 2em;">
                                <i class="fa fa-square fa-stack-2x" style="color:#c31b13;"></i>
                                <i ng-click="shareTo('weibo')" class="fa fa-weibo fa-stack-1x fa-inverse" style="font-size: 22px;line-height: 30px;"></i>
                            </span>
                            <!--<i ng-click="shareTo('weibo')" class="fa " style="color:#E6162D;"></i>-->

                            <!--<span ng-click="shareTo('weibo')"  class="fa-stack fa-lg">-->
                            <!--<i class="fa fa-square fa-stack-2x" style="color: #E6162D;"></i>-->
                            <!--<i class="fa fa-weibo fa-stack-1x fa-inverse" style="color:#ffffff;font-size: 18px;"></i>-->
                            <!--</span>-->
                        </div>
                    </span>
                </div>
            </div>
            <div class="col-xs-4" style="border-left: 1px solid #cecece;border-right: 1px solid #cecece;height: 130px;">
                <div class="text-info">
                    <span class="badge badge-adjust sub-bg-color">2</span> {{ 'manual_share' | translate }}
                </div>
                <div class="icon-info">
                    <button class="btn btn-custom-primary btn-clipboard" tooltip-class="share-copy-link-tooiltip" tooltip-trigger="{'click':'mouseleave'}" uib-tooltip="{{ copyResult | translate }}" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom" data-clipboard-target="#shared-link" ng-click="clickToShare()">
                        {{ 'copy_link' | translate }}
                    </button>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="text-info">
                    <span class="badge badge-adjust sub-bg-color">3</span> {{ 'scan_share' | translate }}
                </div>
                <div class="icon-info">
                    <div id="qrcode"></div>
                </div>
            </div>
        </div>
        <div class="close-share-and-set text-center">
            <a href="javascript:;" ng-click="closeSharedLink()">
                {{ 'stop_share' | translate }} <i ng-show="loading" class="fa fa-spinner fa-pulse"></i>
            </a>
            <!--<button class="btn btn-ghost" ng-click="closeSharedLink()">{{ 'close_share' | translate }} <i ng-show="loading" class="fa fa-spinner fa-pulse"></i></button>-->
        </div>
    <!-- below is another style -->
        <div class="style-before hide">
            <div class="share-link-type" style="height: 70px;">
                <div class="pull-left text-center" style="height:100%;width:100px;line-height:70px;border-right: 1px solid #eee;">
                    <div id="qrcode"></div>
                    <!--<span style="font-size: 26px">{{ 'type' | translate }}</span>-->
                </div>
                <div class="pull-left" style="height: 100%;padding-left: 16px;">
                    <span style="font-size: 20px;line-height:40px">{{ 'public' | translate }}</span>
                    <p class="n-m" style="line-height:30px">{{ 'public_link_info' | translate }}</p>
                </div>
            </div>
            <div class="share-link-info" style="margin-top: 20px;position:relative;">
                <p class="n-m">{{ 'shared_link' | translate }}</p>
                <input type="text" auto-select-all id="shared-link" readonly="readonly" value="{{ sharedLink }}" style="width:100%;">
                <button class="btn btn-clipboard" tooltip-trigger="{'click':'mouseleave'}" uib-tooltip="{{ copyResult | translate }}" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom" data-clipboard-target="#shared-link">
                    <i class="fa fa-clipboard"></i>
                </button>
            </div>
            <div class="share-to-friends text-center" style="margin-top: 20px;">
                <p class="share-to-txt n-m">{{ 'share_to' | translate }}:</p>
                <hr class="hr n-p n-m">
            <span class="app-icon">
                <i ng-click="shareTo('google')" class="fa fa-google-plus-square" style="color:#DF574C;"></i>
                <i ng-click="shareTo('facebook')" class="fa fa-facebook-square" style="color:#44619D;"></i>
                <i ng-click="shareTo('twitter')" class="fa fa-twitter-square" style="color:#55ACEE;"></i>
                <i ng-click="shareTo('linkedin')" class="fa fa-linkedin-square" style="color:#0077B5;"></i>

                <!--<div style="display: inline-block;position: relative">-->
                <!--<i class="fa fa-weixin" ng-mouseenter="showQR()" ng-mouseleave="hideQR()" style="color:#03B20D;"></i>-->
                <!--<div class="webchat-share-info hide">-->
                <!--<div id="qrcode" class="pull-left"></div>-->
                <!--&lt;!&ndash;<div class="qr-use-info pull-left">&ndash;&gt;-->
                <!--&lt;!&ndash;<p class="n-m">ni hao</p>&ndash;&gt;-->
                <!--&lt;!&ndash;<p class="n-m">ni hao</p>&ndash;&gt;-->
                <!--&lt;!&ndash;<p class="n-m">ni hao</p>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--</div>-->
                <!--<div class="tri-angle-pointer hide"></div>-->
                <!--</div>-->
            </span>
            </div>
            <hr class="n-p n-m" style="margin-top: 6px;">
            <div ng-if="sharedLink" class="close-share text-center">
                <button class="btn btn-ghost" ng-click="closeSharedLink()">{{ 'close_share' | translate }} <i ng-show="loading" class="fa fa-spinner fa-pulse"></i></button>
            </div>

        </div>

    </div>

</div>
